<template>
	<div class="middle-table ">
		<div class="middle-table-input ">
			筛选：<input type="text " class="inputmodel " value="1111 ">
			<input type="button" value="确定"
				style="border-radius: 3px; margin-left: 5px; background-color:#1b4d8a;color: white;width: 40px;height: 25px; ">
			<select style="margin-left: 40px; width: 70px;">
				<option>按日</option>
				<option>按月</option>
				<option>按年</option>
			</select>
			
			<select style="margin-left: 40px;">
				<option>2021</option>
				<option>312312</option>
				<option>312312</option>
			</select>年
			<select>
				<option>11</option>
				<option>312312</option>
				<option>312312</option>
			</select>月
			<select>
				<option>28</option>
				<option>312312</option>
				<option>312312</option>
			</select>日
		
		</div>
		<div class="table-box ">
			<table class="table-bordered ">
				<thead style="background-color:rgba(96,101,120, 0.5); ">
					<td style="width: 10%; ">人员ID</td>
					<td style="width: 10%; ">姓名</td>
					<td style="width: 15%; ">总异常</td>
					<td style="width: 15%; ">红色异常</td>
					<td style="width: 15%; ">黄色异常</td>
					<td style="width: 15%; ">异常率</td>
					<td style="width: 20%; ">处置方式</td>
				</thead>
				<tbody>
					<tr>
						<td>A001</td>
						<td>张三</td>
						<td>16</td>
						<td>6</td>
						<td>10</td>
						<td>16%</td>
						<td>0/6/10/0</td>
					</tr>
					<tr class="tabletr">
						<td>A002</td>
						<td>张三</td>
						<td>16</td>
						<td>6</td>
						<td>10</td>
						<td>16%</td>
						<td>0/6/10/0</td>
					</tr>
					<tr>
						<td>A003</td>
						<td>张三</td>
						<td>16</td>
						<td>6</td>
						<td>10</td>
						<td>16%</td>
						<td>0/6/10/0</td>
					</tr>
					<tr class="tabletr">
						<td>A004</td>
						<td>张三</td>
						<td>16</td>
						<td>6</td>
						<td>10</td>
						<td>16%</td>
						<td>0/6/10/0</td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>

					</tr>
					<tr class="tabletr">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'WorkerNotesTable'
	}
</script>

<style scoped="scoped">
	.middle-table {
		width: 70%;
		height: 100%;
		float: left;
	}

	.middle-table-input {
		width: 100%;
		float: left;
		color: white;
		margin-left: 10px;
		margin-top: 10px;
	}

	.inputmodel {
		-web-kit-appearance: none;
		-moz-appearance: none;
		box-sizing: border-box;
		border: 1px solid rgb(62, 90, 112);
		color: #6a6f77;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		background-color: rgba(28, 45, 65, 0.5);
		height: 23px;
	}

	.table-box {
		float: left;
		width: 100%;
		overflow: auto;
		height: 90%;
		margin-top: 10px;
		border: 2px solid rgb(62, 90, 112);
		border-left: 0px;
	}

	.table-bordered {
		width: 100%;
		font-size: 12px;
		color: white;
		border-spacing: 0px;
	}

	.table-bordered tr {
		height: 30px;
	}

	thead {
		height: 30px;
	}
	.tabletr{
		background-color:rgba(96,101,120, 0.5);
	}
	.table-bordered td {
		border-left: solid 2px rgb(62, 90, 112);
	}
	.table-bordered tbody tr:hover{
		background-color: rgb(70,70,70);
	}
</style>
